import React        from 'react';

// 封装通用的列表
class TableList extends React.Component{
  constructor(props){
    super(props)
    // 处理通用列表中的 isfirstLoading, 第一次加载都是 true
    this.state = {
      isFirstLoading: true
    }
  }

  componentWillReceiveProps(){
    // 列表只有在第一次挂载的时候 isFirstLoading 是 true, 其他的时候为 false
    this.setState({
      isFirstLoading: false
    });
  }

  render(){
    // 表头信息
    let tableHeader = this.props.tableHeads.map(
      (tableHead, index) => {
        if(typeof tableHead === 'object'){
          return <th key={index} width={tableHead.width}>{tableHead.name}</th>
        }else if(typeof tableHead === 'string'){
          return <th key={index}>{tableHead}</th>
        }
      }
    );
    // 列表的 body 内容，这里是个数组
    let listbody = this.props.children;
    // 列表的头部+body没有数据的信息
    let listInfo = (
      <tr>
        <td
          colSpan={this.props.tableHeads.length}
          className="text-center"
        >
          {this.state.isFirstLoading ? "正在加载数据..." : "没有找到相应的结果～"}
        </td>
      </tr>
    );
    let tableBody = listbody.length > 0 ? listbody : listInfo;

    return (
      <div className="row">
        <div className="col-md-12">
          <table className="table table-striped table-bordered">
            <thead>
              <tr>
                {tableHeader}
              </tr>
            </thead>
            <tbody>
              {tableBody}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default TableList;